<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="component/heard :: head"></head>
<body>
<nav th:include="component/nav :: nav"></nav>
<link rel="stylesheet" href="/js/bootstrap-table.min.css">
<script src="/js/bootstrap-table.min.js"></script>

<div class="" style="font-size: 14px;">
    <!--class="table table-striped table-hover"-->
    <div class="d-flex align-items-start ">
        <div class="nav flex-column  me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link link-dark active" id="v-pills-home-tab" data-bs-toggle="pill"
               data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home"
               aria-selected="true">基本信息
            </a>
            <a class="nav-link link-dark" id="v-pills-profile-tab" data-bs-toggle="pill"
               data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile"
               aria-selected="false">控制台
            </a>
        </div>
        <div class="tab-content flex-fill" id="v-pills-tabContent">
            <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
                 aria-labelledby="v-pills-home-tab">
                <div style="margin-top: 10px;">
                    <button type="button" id="test_btn" class="btn btn-secondary btn-sm">测试</button>
                    <button type="button" class="btn btn-primary btn-sm">设置</button>
                </div>
                <table id="table"></table>

            </div>
            <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                <div th:include="component/log :: log"></div>
            </div>
        </div>
    </div>

</div>


</body>
<script>
    const table = {
        $table: $('#table'),
        init: function () {
            this.$table.bootstrapTable({
                url: "/alcinfo?env=pro",
                method: "GET",
                dataType: "json",//数据类型
                sidePagination: "server",
                pagination: true,
                showHeader: true,
                pageSize: false,
                //height: 700,
                toolbar: '#toolbar',
                clickToSelect: false,
                uniqueId: "id",
                pageNumber: 1,
                pageList: 10,
                cardView: false,
                classes: "table ",
                onlyInfoPagination: true,
                columns: [
                    {
                        "checkbox": true,
                    },
                   {
                        "field": "link",
                        "title": "link"
                    },

                    {
                        "field": "opt",
                        "title": "操作",
                        "formatter": function (value, item, index) {

                            return "" +
                                "    <button type=\"button\" class=\"btn btn-sm btn-outline-primary\">链接</button>\n" +
                                "    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">测试</button>\n"
                                /*   "    <button type=\"button\" class=\"btn btn-sm btn-outline-success\">Success</button>\n" +
                                   "    <button type=\"button\" class=\"btn btn-sm btn-outline-danger\">Danger</button>\n" +
                                   "    <button type=\"button\" class=\"btn btn-sm btn-outline-warning\">Warning</button>\n" +
                                   "    <button type=\"button\" class=\"btn btn-sm btn-outline-info\">Info</button>\n" +
                                   "    <button type=\"button\" class=\"btn btn-sm btn-outline-light\">Light</button>\n" +
                                   "    <button type=\"button\" class=\"btn btn-sm btn-outline-dark\">Dark</button>"*/;
                        }

                    }]
                ,
                queryParams: function (params) {
                },
                responseHandler: function (res) {
                    return eval(res.data);
                },
                onLoadSuccess: function () {
                },
                onLoadError: function () {
                },
                onDblClickRow: function (row, $element) {
                },
                onClickCell: function (field, value, row, $element) {
                }

            });
        },


    };
</script>
<script>
    $(function () {
        table.init();
        $("#test_btn").on("click", function () {
            let list = table.$table.bootstrapTable('getSelections');
            var someTabTriggerEl = document.querySelector('#v-pills-profile-tab')
            var tab = new bootstrap.Tab(someTabTriggerEl)

            tab.show()
            $.ajax({
                type: "post",
                data: JSON.stringify(list),
                url: "/alc/test",
                async: true,
                contentType: 'application/json',
                dataType: 'JSON',
                success: function (obj) {

                }
            });

        });
    })
</script>
</html>
